<script setup>

</script>

<template>
  <div class="figure">
    <div class="figure-middle">
      <a href="" class="fh"></a>
      <p style="float: right;margin-top: 45px;margin-right: 10px;">
        <a href="" style="color: #fff2d7;font-size: 18px;text-decoration: none">官网首页>新手站</a>
      </p>
      <img src="/xinimgs/img-text-xinshou.png" class="xsz">
    </div>
  </div>
  <div class="lbg">
    <div class="lm">
      <div style="animation: animate 0.8s 0.4s ease both;margin-top: 0;">
        <h3 style="line-height: 1;text-align: center">
          <span class="xszn"></span>
        </h3>
        <div class="dlbj" >
          <h6 style="line-height: 1;margin: 36px 0 24px; text-align: center">
            <div class="mydlp"></div>
          </h6>
          <ul class="u1">
            <li class="f1">
              <a href="" class="sp">
                <div class="yxjs1"></div>
                <i class="bft"></i>
              </a>
              <p class="gi">火影忍者游戏介绍</p>
            </li>

            <li class="f1">
              <a href="" class="sp">
                <div class="yxjs2"></div>
                <i class="bft"></i>
              </a>
              <p class="gi">领取体力教程</p>
            </li>

            <li class="f1">
              <a href="" class="sp">
                <div class="yxjs3"></div>
                <i class="bft"></i>
              </a>
              <p class="gi">替身释放教学</p>
            </li>

            <li class="f1">
              <a href="" class="sp">
                <div class="yxjs4"></div>
                <i class="bft"></i>
              </a>
              <p class="gi">通灵/密卷教学</p>
            </li>
          </ul>
          <div style="height: 445px;overflow: hidden;">
            <div style="width: 410px;height: 445px;float: left">
              <i class="luwan"></i>
              <ul class="xyjs">
                <li class="xrxy"></li>
                <li class="wfjs"></li>
              </ul>
            </div>
            <div style="margin: 27px 0 0 44px;float: left">
              <div style="width: 660px;height: 395px;display: block">
                <ul class="u2">
                  <li style="float: left;margin: 0 22px 20px 0;">
                    <a href="" class="flhxg">
                      <div class="renzhejnfl"></div>
                    </a>
                  </li>

                  <li style="float: left;margin: 0 22px 20px 0;">
                    <a href="" class="zlts">
                      <div class="sj"></div>
                    </a>
                  </li>

                  <li style="float: left;margin: 0 22px 20px 0;">
                    <a href="" class="cytl">
                      <div class="tl"></div>
                    </a>
                  </li>

                  <li style="float: left;margin: 0 22px 20px 0;">
                    <a href="" class="cymj">
                      <div class="mj"></div>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>

<!--        <h3 style="line-height: 1;text-align: center">-->
<!--          <span class="rzhq"></span>-->
<!--        </h3>-->
<!--        <div>-->

<!--        </div>-->

        <h3 style="line-height: 1;text-align: center">
          <span class="jjgs"></span>
        </h3>
        <div class="dlbj2">
          <div class="tb">
            <ul class="tbzt" style="text-align: center">
              <li class="rzjx">忍者教学</li>
              <li class="jdcgl">角斗场攻略</li>
              <li class="zlts2">战力提升</li>
            </ul>
          </div>
          <ul style="display: block;height: 396px;margin: 17px 0 0 90px;">
            <li style="float: left;margin: 0 40px 10px 0;padding: 0;list-style: none">
              <a href="" class="dt">
                <div class="dtp"></div>
              </a>
              <p class="dtwz">【忍者攻略】忍战歹徒玩不明白?一图流攻略这就奉上!</p>
            </li>
            <li style="float: left;margin: 0 40px 10px 0;padding: 0;list-style: none">
              <a href="" class="mm">
                <div class="mmp"></div>
              </a>
              <p class="mmwz">【忍者攻略】神秘面具男[忍者之路]实战解读！听说他全身都是抓取?</p>
            </li>
            <li style="float: left;margin: 0 40px 10px 0;padding: 0;list-style: none">
              <a href="" class="nc">
                <div class="ncp"></div>
              </a>
              <p class="ncwz">【忍者攻略】进可攻退可守，永春功夫真奥妙!</p>
            </li>
            <li style="float: left;margin: 0 40px 10px 0;padding: 0;list-style: none">
              <a href="" class="sm">
                <div class="smp"></div>
              </a>
              <p class="smwz">【忍者攻略】只有知己知彼，方能捕捉闪光的踪迹!</p>
            </li>
            <li style="float: left;margin: 0 40px 10px 0;padding: 0;list-style: none">
              <a href="" class="jy">
                <div class="jyp"></div>
              </a>
              <p class="jywz">【忍者攻略】夏日静音秀绝活，木叶邮局送礼盒!</p>
            </li>
            <li style="float: left;margin: 0 40px 10px 0;padding: 0;list-style: none">
              <a href="" class="kkx">
                <div class="kkxp"></div>
              </a>
              <p class="kkxwz">【忍者攻略】畅享夏日，冲浪滑板勇当先！</p>
            </li>
          </ul>
        </div>
        <a href="" class="dtt"></a>
      </div>
    </div>
  </div>
</template>

<style scoped>
div{
  list-style: none;
  margin: 0;
  padding: 0;
}
h6{
  font-size: 100%;
  font-weight: normal;
}
h3{
  font-size: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: normal;
}
ul,li{
  padding: 0;
  list-style: none;
}

/*上部分的人物背景部分*/
.figure {
  background: url("/public/xinimgs/con_top.jpg") no-repeat center top;
  width: 100%;
  height: 295px;
  margin: 0 auto;
  padding: 0;
}

/*上部分中间部分的背景*/
.figure-middle {
  position: relative;
  width: 1000px;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
}

/*上部分的中间右侧返回部分*/
.figure-middle .fh {
  position: absolute;
  left: 0;
  top: 135px;
  width: 149px;
  height: 34px;
  background-image: url("/public/xinimgs/btn-back.png");
}

/*上部分的中间左侧新手站部分*/
.figure .figure-middle .xsz {
  position: absolute;
  right: 0;
  top: 110px;
  height: 82px;
}

/*下部分背景*/
.lbg {
  background: url("/public/xinimgs/content.jpg") no-repeat center bottom;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
/*下半部分中间部分*/
.lbg .lm{
  width: 1142px;
  height: 100%;
  margin: 0 auto;
  padding: 5px 0 110px;
}
/*下半部分中间部分的新手指南部分*/
.lbg .lm .xszn{
  background: url("/public/xinimgs/tit1.png") no-repeat center;
  width: 494px;
  height: 220px;
  display: inline-block;
  line-height: 1;
}

/*下半部分中间部分的新手指南的木叶导览背景部分*/
.lbg .lm .dlbj{
  width: 1142px;
  height: 747px;
  background-image: url("/public/xinimgs/novice.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}


/*下半部分中间部分部分*/








.lbg .lm .dlbj .mydlp{
  background: url("/public/xinimgs/sprite.png") no-repeat;
  background-position: -563px -110px;
  width: 194px;
  height: 36px;
  margin: 0 auto;
}
.lbg .lm .dlbj .u1{
  margin: 0 0 13px 28px;
  height: 187px;
  overflow: hidden;
}
.lbg .lm .dlbj .u1 .f1{
  margin: 0 10px;
  float: left;
}
.lbg .lm .dlbj .u1 .f1 .sp{
  width: 250px;
  height: 135px;
  position: relative;
  border: 3px solid #45443c;
  overflow: hidden;
  display: block;
  text-decoration: none;
  outline: none;
}
.lbg .lm .dlbj .u1 .f1 .sp .yxjs1{
  background-image: url("/public/xinimgs/yxjs.png");
  width: 100%;
  height: 140px;
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 1s;
}
.lbg .lm .dlbj .u1 .f1 .sp .yxjs1:hover{
  transform: scale(1.2);
}

.lbg .lm .dlbj .u1 .f1 .sp .yxjs2{
  background-image: url("/public/xinimgs/tllq.png");
  width: 100%;
  height: 140px;
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 1s;
}
.lbg .lm .dlbj .u1 .f1 .sp .yxjs2:hover{
  transform: scale(1.2);
}


.lbg .lm .dlbj .u1 .f1 .sp .yxjs3{
  background-image: url("/public/xinimgs/tssf.png");
  width: 100%;
  height: 140px;
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 1s;
}
.lbg .lm .dlbj .u1 .f1 .sp .yxjs3:hover{
  transform: scale(1.2);
}

.lbg .lm .dlbj .u1 .f1 .sp .yxjs4{
  background-image: url("/public/xinimgs/tlmjsf.jpg");
  width: 100%;
  height: 140px;
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 1s;
}
.lbg .lm .dlbj .u1 .f1 .sp .yxjs4:hover{
  transform: scale(1.2);
}

.lbg .lm .dlbj .u1 .f1 .gi{
  max-width: 200px;
  font-size: 16px;
  color: #504a42;
  line-height: 2;
  text-align: center;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 0;
  margin-bottom: 0;
}
.lbg .lm .dlbj .u1 .f1 .sp .bft{
  background: url("/public/xinimgs/sprite.png") no-repeat;
  background-position: -728px -10px;
  width: 34px;
  height: 34px;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: -17px auto 0;
}
.lbg .lm .dlbj .luwan{
  width: 276px;
  height: 445px;
  margin: 0 0 0 50px;
  background: url("/public/xinimgs/novice-introduce.png") no-repeat center;
  display: block;
  float: left;
  font-style: normal;
}
.lbg .lm .dlbj .xyjs{
  width: 53px;
  height: 380px;
  background: url("/public/xinimgs/sprite.png") no-repeat;
  background-position: -1137px -10px;
  margin-top: 35px;
  overflow: hidden;
  float: right;
}
.lbg .lm .dlbj .xyjs .xrxy{
  width: 45px;
  height: 184px;
  margin: 4px auto 0;
  cursor: pointer;
  background: url("/public/xinimgs/sprite.png") no-repeat;
  background-position: -1082px -10px;
}
.lbg .lm .dlbj .xyjs .wfjs{
  width: 45px;
  height: 184px;
  margin: 4px auto 0;
  cursor: pointer;
  background: url("/public/xinimgs/sprite.png") no-repeat;
  background-position: -1027px -210px;
}
.lbg .lm .dlbj .u2{
  width: 818px;
  display: block;
  height: 385px;
  list-style: none;
}


.lbg .lm .dlbj .u2 .flhxg{
display: block;
  width: 308px;
  height: 173px;
  overflow: hidden;
  color: #a65d42;
  line-height: 1.4;
  text-decoration: none;
}
.lbg .lm .dlbj .u2 .flhxg .renzhejnfl{
  width: 308px;
  height: 173px;
  background-image: url("/public/xinimgs/jinengflxg.png");
  transition: transform 0.8s;
}
.lbg .lm .dlbj .u2 .flhxg .renzhejnfl:hover{
  transform: scale(1.1);
}

.lbg .lm .dlbj .u2 .zlts .sj{
  width: 308px;
  height: 173px;
  background-image: url("/public/xinimgs/zlts.png");
  transition: transform 0.8s;
}
.lbg .lm .dlbj .u2 .zlts .sj:hover{
  transform: scale(1.1);
}

.lbg .lm .dlbj .u2 .cytl .tl{
  width: 308px;
  height: 173px;
  background-image: url("/public/xinimgs/cytl.jpg");
  transition: transform 0.8s;
}
.lbg .lm .dlbj .u2 .cytl .tl:hover{
  transform: scale(1.1);
}

.lbg .lm .dlbj .u2 .cymj .mj{
  width: 308px;
  height: 173px;
  background-image: url("/public/xinimgs/cymj.png");
  transition: transform 0.8s;
}
.lbg .lm .dlbj .u2 .cymj .mj:hover{
  transform: scale(1.1);
}


.lbg .lm .jjgs{
  background: url("/public/xinimgs/tit3.png") no-repeat center;
  width: 690px;
  height: 279px;
  display: inline-block;
  line-height: 1;
}
.lbg .lm .dlbj2{
  width: 1195px;
  height: 613px;
  background-image: url("/public/xinimgs/advance.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.lbg .lm .dlbj2 .tb{
  width: 1095px;
  height: 50px;
  position: relative;
  margin: 58px auto 0;
}
.lbg .lm .dlbj2 .tb .rzjx{
  color: #fff;
  font-size: 18px;
  line-height: 36px;
  padding: 7px 50px;
  cursor: pointer;
  display: inline-block;
}
.lbg .lm .dlbj2 .tb .jdcgl{
  color: #fff;
  font-size: 18px;
  line-height: 36px;
  padding: 7px 50px;
  cursor: pointer;
  display: inline-block;
}
.lbg .lm .dlbj2 .tb .zlts2{
  color: #fff;
  font-size: 18px;
  line-height: 36px;
  padding: 7px 50px;
  cursor: pointer;
  display: inline-block;
}

.lbg .lm .dt{
  display: block;
  width: 310px;
  height: auto;
  overflow: hidden;
  text-decoration: none;
}
.lbg .lm .dt .dtp{
  background-image: url("/public/xinimgs/dt.png");
  display: block;
  width: 100%;
  height: 132px;
  background-size: contain;
  transition: transform 0.8s;
}
.lbg .lm .dt .dtp:hover{
  transform: scale(1.1);
}

.lbg .lm .dtwz{
  width: 310px;
  font-size: 18px;
  color: #5c5745;
  height: 40px;
  line-height: 1.2;
  text-align: justify;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 8px 0;
  list-style: none;
  word-break: break-all
}

.lbg .lm .mm{
  display: block;
  width: 310px;
  height: auto;
  overflow: hidden;
  text-decoration: none;
}
.lbg .lm .mm .mmp{
  background-image: url("/public/xinimgs/mm.jpg");
  display: block;
  width: 100%;
  height: 132px;
  background-size: contain;
  transition: transform 0.8s;
}
.lbg .lm .mm .mmp:hover{
  transform: scale(1.1);
}

.lbg .lm .mmwz{
  width: 310px;
  font-size: 18px;
  color: #5c5745;
  height: 40px;
  line-height: 1.2;
  text-align: justify;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 8px 0;
  list-style: none;
  word-break: break-all
}

.lbg .lm .nc{
  display: block;
  width: 310px;
  height: auto;
  overflow: hidden;
  text-decoration: none;
}
.lbg .lm .nc .ncp{
  background-image: url("/public/xinimgs/mm.jpg");
  display: block;
  width: 100%;
  height: 132px;
  background-size: contain;
  transition: transform 0.8s;
}
.lbg .lm .nc .ncp:hover{
  transform: scale(1.1);
}

.lbg .lm .ncwz{
  width: 310px;
  font-size: 18px;
  color: #5c5745;
  height: 40px;
  line-height: 1.2;
  text-align: justify;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 8px 0;
  list-style: none;
  word-break: break-all
}

.lbg .lm .nc{
  display: block;
  width: 310px;
  height: auto;
  overflow: hidden;
  text-decoration: none;
}
.lbg .lm .nc .ncp{
  background-image: url("/public/xinimgs/nc.png");
  display: block;
  width: 100%;
  height: 132px;
  background-size: contain;
  transition: transform 0.8s;
}
.lbg .lm .nc .ncp:hover{
  transform: scale(1.1);
}

.lbg .lm .ncwz{
  width: 310px;
  font-size: 18px;
  color: #5c5745;
  height: 40px;
  line-height: 1.2;
  text-align: justify;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 8px 0;
  list-style: none;
  word-break: break-all
}

.lbg .lm .sm{
  display: block;
  width: 310px;
  height: auto;
  overflow: hidden;
  text-decoration: none;
}
.lbg .lm .sm .smp{
  background-image: url("/public/xinimgs/sm.png");
  display: block;
  width: 100%;
  height: 132px;
  background-size: contain;
  transition: transform 0.8s;
}
.lbg .lm .sm .smp:hover{
  transform: scale(1.1);
}

.lbg .lm .smwz{
  width: 310px;
  font-size: 18px;
  color: #5c5745;
  height: 40px;
  line-height: 1.2;
  text-align: justify;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 8px 0;
  list-style: none;
  word-break: break-all
}

.lbg .lm .jy{
  display: block;
  width: 310px;
  height: auto;
  overflow: hidden;
  text-decoration: none;
}
.lbg .lm .jy .jyp{
  background-image: url("/public/xinimgs/jy.png");
  display: block;
  width: 100%;
  height: 132px;
  background-size: contain;
  transition: transform 0.8s;
}
.lbg .lm .jy .jyp:hover{
  transform: scale(1.1);
}

.lbg .lm .jywz{
  width: 310px;
  font-size: 18px;
  color: #5c5745;
  height: 40px;
  line-height: 1.2;
  text-align: justify;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 8px 0;
  list-style: none;
  word-break: break-all
}

.lbg .lm .kkx{
  display: block;
  width: 310px;
  height: auto;
  overflow: hidden;
  text-decoration: none;
}
/*卡卡西图片*/
.lbg .lm .kkx .kkxp{
  background-image: url("/public/xinimgs/kkx.png");
  display: block;
  width: 100%;
  height: 132px;
  background-size: contain;
  transition: transform 0.8s;
}
.lbg .lm .kkx .kkxp:hover{
  transform: scale(1.1);
}

/*卡卡西文字*/
.lbg .lm .kkxwz{
  width: 310px;
  font-size: 18px;
  color: #5c5745;
  height: 40px;
  line-height: 1.2;
  text-align: justify;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 8px 0;
  list-style: none;
  word-break: break-all
}
.lbg .dtt{
  width: 198px;
  height: 54px;
  margin-top: 30px;
  background: url("/public/xinimgs/sprite.png") no-repeat;
  background-position: -495px -470px;
  display: block;
  text-decoration: none;
  margin: 30px auto;
  animation: zoom 2s infinite alternate;
}
@keyframes zoom {
  0% {
    transform: scale(1); /* 初始大小 */
  }
  50% {
    transform: scale(1.2); /* 变大到1.2倍 */
  }
  100% {
    transform: scale(1); /* 恢复原始大小 */
  }
}
</style>